<template>
  <view id="edit">
    <NavBar
      class="navbar"
      :navList="list"
      :current="current"
      @change="(index) => (current = index)"
    ></NavBar>
    <view v-if="current === 0" class="tabc">
      <BasicTitle></BasicTitle>
    </view>
    <view v-if="current === 1" class="tabc">
      <DetailTitle></DetailTitle>
    </view>
    <view v-if="current === 2" class="tabc">
      <MetaTitle></MetaTitle>
    </view>
    <view class="station"></view>
    <view class="footer-button">
      <button
        style="background-image: linear-gradient(to right, #ec8ea7, #f3bdc9); border-radius: 40rpx"
        v-if="current != 2"
        @click="current++"
      >
        下一步({{ current + 1 }} - 3)
      </button>
      <button
        style="background-image: linear-gradient(to right, #ec8ea7, #f3bdc9); border-radius: 40rpx"
        v-else
        @click="addsc"
      >
        下一步({{ current + 1 }} - 3)
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import NavBar from '../../../components/NavBar.vue'
import BasicTitle from '../components/BasicTitle.vue'
import DetailTitle from '../components/DetailTitle.vue'
import MetaTitle from '../components/MateTitle.vue'
import { postUpdateDataAPI } from '@/services/my'

const list = ['基本信息', '详细资料', '择偶要求']

const current = ref(0)

watch(current, (newVal) => {
  // console.log(newVal)
})

//跳转
const jump = (url: string): void => {
  uni.switchTab({
    url: url,
  })
}
// 获取我喜欢的数量接口

const addsc = async () => {
  current.value = 0
  jump('/pages/my/my')
  const formData = uni.getStorageSync('formData')
  const baseFormData = uni.getStorageSync('baseFormData')
  const userInfo = uni.getStorageSync('userInfo')
  // const detailFormData = uni.getStorageSync('detailFormData')
  // const metaFormData = uni.getStorageSync('metaFormData')
  const data = {
    ...formData,
    ...baseFormData,
    my_id: userInfo.id,
    // ...detailFormData,
    // ...metaFormData
  }
  console.log(formData, 'formData')
  console.log(data, 'data')
  console.log(baseFormData, 'baseFormData')

  const dataList = await postUpdateDataAPI(data)
}
</script>

<style scoped lang="scss">
#edit {
  width: 100%;
  height: 92vh;

  .tabc {
    width: 100%;
    height: 93.7%;
    padding: 3%;
    box-sizing: border-box;
  }
}

.footer-button {
  padding: 0 3%;
  box-sizing: border-box;
  position: sticky;
  bottom: 2%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;

  button {
    color: #fff;
  }
}

.navbar {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

::v-deep .is-input-border {
  border: none !important;
}

::v-deep .uni-easyinput {
  text-align: right;
}

::v-deep.uni-date-x--border {
  border: none;
}

::v-deep .uni-date__x-input {
  flex: none;
}

::v-deep .uni-card--shadow {
  box-shadow: none;
}

::v-deep .uni-card--border {
  border: none;
}

::v-deep element.style {
  box-shadow: none;
  font-size: 0;
}

::v-deep .uni-forms-item__label {
  font-size: 3vw;
}

::v-deep .uni-easyinput__content-input {
  font-size: 3vw;
}

::v-deep .uni-section .uni-section-header {
  padding: 0 !important;
}

// form表单靠右显示
::v-deep .uni-forms-item {
  display: flex;
  justify-content: space-between;
}

// 日期显示回显靠右显示
::v-deep.uni-forms-item__content {
  flex: none;
}

::v-deep.uni-forms-item {
  margin-bottom: 5%;
}
</style>
